<template>
    <a-card-grid style="width:100%;padding:0">
        <a-collapse v-model:activeKey="activeKey" expand-icon-position="right">
            <a-collapse-panel key="1">
                <template #header>
                    <div class="plugin-item">
                        <img :src="ServicePath + detail.icon" alt="" @dragstart.prevent>
                        <div class="_Content">
                            <div class="title">{{detail.title}}</div>
                            <div style="padding:0 0 5px 0">
                                v{{detail.lastVersion}}
                                <a-button type="primary" danger size="small" :loading="detail.installing" :disabled="ButtonText == '已安装'" @click.stop="install">{{ButtonText}}</a-button>
                            </div>
                            <div class="description">{{detail.description}}</div>
                        </div>
                    </div>
                </template>
                <div class="plugin-body" v-if="!detailLoading">
                    <a-spin />
                </div>
                <div class="plugin-view scroll" v-if="detailLoading">
                    <div v-for="item in Content" class="Content">
                        <div class="ContentTitle">v{{item.version}} </div>
                        <div class="ContentDes">
                            更新时间： {{item.date}} <br>
                            <span v-if="item.update.length">新增:</span>
                            <div class="childrens" v-for="child in item.update">{{child}}</div>
                            <span v-if="item.debug.length">修复:</span>
                            <div class="childrens" v-for="child in item.debug">{{child}}</div>
                        </div>
                    </div>
                </div>
            </a-collapse-panel>
        </a-collapse>
    </a-card-grid>
</template>
<script setup>
import { ref, watch, computed } from 'vue';
import axios from 'axios';
import { useStore } from 'vuex'
const store = useStore();
const props = defineProps({  //获取传参的数据
    detail: Object,
})
const activeKey = ref(null);
const loading = ref(false);
const detailLoading = ref(false);
const ButtonText = ref('');
const Content = ref({});
const ServicePath = computed(() => store.state.ServicePath)


ButtonText.value = '已安装';
const install = () => {
    store.dispatch('Install', props.detail.key);
}

if (props.detail.install === null) ButtonText.value = '安装';
if (props.detail.install === true) ButtonText.value = '已安装';
if (props.detail.install === false) ButtonText.value = '更新';


watch(() => props.detail.install, (val) => {
    if (val === null) ButtonText.value = '安装';
    if (val === true) ButtonText.value = '已安装';
    if (val === false) ButtonText.value = '更新';
})

watch(() => activeKey.value, (value) => {
    var newTime = new Date().getTime();
    if (!detailLoading.value && value == '1') {
        axios.get(store.state.ServicePath + props.detail.path + '?t=' + newTime).then(res => {
            detailLoading.value = true;
            Content.value = res.data;
        })
    }
})


</script>
<style scoped>
.plugin-item {
    display: flex;
}
.plugin-item img {
    border-radius: 15px;
    height: 80px;
    width: 80px;
}

.plugin-item ._Content {
    padding: 5px 10px 10px 20px;
}
.plugin-item .title {
    font-size: 20px;
    font-weight: bold;
    padding-bottom: 10px;
}

.plugin-body {
    text-align: center;
}

.ContentTitle {
    padding-top: 10px;
    font-size: 18px;
    font-weight: bold;
}
.ContentDes {
    padding: 10px 0 20px 20px;
    border-bottom: 1px solid #ccc;
}
.plugin-view {
    max-height: 300px;
}

.plugin-view .Content:last-child .ContentDes {
    border-bottom: none;
    padding-bottom: 0px;
}
.childrens {
    padding-left: 20px;
}
</style>
